@import 'com/sass/_utils-wap';
@import 'com/sass/_reset-wap';
@import 'compass/css3';
$icon:sprite-map("stu/read/*.png",$spacing:10px);
body{
    color: #333;
}
a{
    color: #555;
}
a:hover{
    text-decoration: none;
}
header{
    font-size: 34px/$ppr;
    border-bottom: #dcdcdc solid 1px;
    height: 95px/$ppr;
    line-height: 95px/$ppr;
    text-align: center;
    position: relative;
    color: #ff6611;
    #back{  
        @include icon($icon,"back");
        display: inline-block;
        position: absolute;
        left: 35px/$ppr;
        top: 30px/$ppr;
    }
}
article{
    padding: 0 25px/$ppr;
    h3{
        color: #333;
        font-size: 36px/$ppr;
        text-align: center;
        line-height: 100px/$ppr;
    }
    p{
        color: #555;
        font-size: 28px/$ppr;
        line-height: 58px/$ppr;
        position: relative;
        text-indent: 56px/$ppr;
        padding-top: 10px/$ppr;
        em{
            width: 32px/$ppr;
            height: 32px/$ppr;
            border-radius: 16px/$ppr;
            line-height: 32px/$ppr;
            font-size: 28px/$ppr;
            color: #fff;
            background: #ffbb00;
            display: inline-block;
            text-align: center;
            margin-right: 10px/$ppr;
        }
    }
}
.red{
    color: #ff6611;
}
footer{
    background: #f5f5f5;
    // min-height: 180px/$ppr;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: #DBDBDB solid 1px;
    padding:40px/$ppr 0;
    div.lesson{
        width: 655px/$ppr;
        height: 90px/$ppr;
        margin: 0 auto;
        position: relative;
        em{
            @include icon($icon,'play_03');
            position: absolute;
            top:0;
            left: 0;
        }
        p{
            width: 545px/$ppr;
            height: 25px/$ppr;
            background: #b6b6b6;
            border-radius: 13px/$ppr;
            position: absolute;
            top:35px/$ppr;
            left: 110px/$ppr;
            span{
                display: inline-block;
                background: #ffbb00;
                width: 80%;
                height: 25px/$ppr;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 13px/$ppr 0 0 13px/$ppr;
                i{
                    width: 38px/$ppr;
                    height: 38px/$ppr;
                    border-radius: 19px/$ppr;
                    position: absolute;
                    right: -19px/$ppr;
                    background: #ffbb00;
                    top:-8px/$ppr;
                }
            }
        }
    }
    .record{
        .recording{
            @include icon($icon,'record_03');
            margin: 0 auto;
            display: block;
            &.hidden{
                display: none;
            }
        }
        p{
            font-size: 28px/$ppr;
            text-align: center;
            color: #ff6611;
            em{
                @include icon($icon,'arrow_03');
                display: inline-block;
                position: relative;
                top: -5px/$ppr;
            }
            span{
                height: 100px/$ppr;
                line-height: 100px/$ppr;
                width: 100px/$ppr;
                text-align: center;
                font-size: 48px/$ppr;
                background: #ffbb00;
                color: #fff;
                display: inline-block;
                border-radius: 50px/$ppr;
            }
        }
        .r_con{
            .icons{
                text-align: center;
                padding: 25px/$ppr;
                a{
                    display: inline-block;
                    margin-right: 45px/$ppr;
                    &.icon1{
                        @include icon($icon,'read_03');
                    }
                    &.icon2{
                        @include icon($icon,'play_03');
                    }
                    &.icon3{
                        @include icon($icon,'read_05');
                        margin-right: 0;
                    }
                }
            }
        }
        .record_now{
            @include icon($icon,'read_09');
        }
    }
}
.hidden{
    display: none;
}